<template>
<div>
    <hb-box class="check" :title="Lang.title[lang]">
        <ul :style="style.box">
            <li class="items flex" :style="style.firstItem">
                <span class="tr0 ilbk" v-text="Lang.level[lang]">安全等级:</span>
                <div class="strongLength ilbk">1</div>
            <!-- </li>
             <li class="items flex"
                :style="style.items">
                <div class="tr0 ilbk">
                    <i class="icon nfont ilbk">!</i>
                    <em class="nfont"
                        v-text="Lang.option[lang][0]">邮箱:</em>
                </div>
                <div class="strongLength ilbk">2333</div>
                <hb-button2 class="right"
                    :txt="Lang.bind[lang]"
                    @clk="e_bindEmail_" />
            </li>  -->
             <!-- <li class="items flex"
                :style="style.items">
                <div class="tr0 ilbk">
                    <i v-show="phonenumber===''" class="icon_red nfont ilbk">!</i>
                    <i v-show="phonenumber!=''" class="icon_green nfont ilbk">✓</i>
                    <em class="nfont"
                        v-text="Lang.option[lang][1]">手机:</em>
                </div>
                <div class="strongLength ilbk"
                    v-text="phone">2333</div>
                <hb-button2 class="right"
                    :txt="Lang.change[lang]" /> 
            </li>  -->
            <li class="items flex" :style="style.items">
                <div class="tr0 ilbk">
                    <i v-show="!ispassword" class="icon_red nfont ilbk">!</i>
                    <i v-show="ispassword" class="icon_green nfont ilbk">✓</i>
                    <em class="nfont" v-text="Lang.option[lang][2]">交易密码:</em>
                </div>
                <div v-show="ispassword" class="strongLength ilbk" >******</div>
                <div v-show="!ispassword" class="strongLength ilbk" v-text="Lang.setTradePassword[lang]">2333</div>
                <hb-button2 class="right" :txt="ispassword?Lang.setup[lang][0]:Lang.setup[lang][1]" @clk="e_aboutTradePassword_" />
            </li>
        </ul>
    </hb-box>
    <hb-dialog v-if="msgback !== ''">
            <span v-text="msgback"/>
        </hb-dialog>
</div>
</template>

<script>
import style from '../style'
import {phoneHandle} from '@d/qsoft'
import {check} from './lang'
import {vpost, vlink} from '@api'

export default {
	data() {
		return {
			style,
			Lang: check,
			msgback: '',
			isPhone: false,
			phonenumber: '',
		}
	},
	computed: {
		phone() {
			return phoneHandle(this.phonenumber)
		},
		lang() {
			return this.$store.state.setting.lang
		},
		ispassword() {
			return this.$store.state.user.ispassword
		},
	},
	created() {
		this.init()
	},
	methods: {
		e_bindEmail_() {
			this.$router.push('/safe/bindemail')
		},
		e_aboutTradePassword_() {
			//路由传参  设置密码/修改密码
			this.$router.push('/safe/setTradePassword')
			this.$router.push('/safe/setTradePassword')
		},
		init() {
			if (this.$store.state.user.ispassword == true) {
				return
			}
			let inputdate={
				id : this.$store.state.user.uid,
			}
			vpost(vlink.user.ispassword,inputdate).then(re => {
				if (re.status == 1) {
					this.phonenumber = re.data.phone
					this.$store.commit('set_user_ispassword', re.data.ispassword)
				} else if (re.status == 0) {
					this.msgback = re.msg
					setTimeout(() => {
						this.msgback = ''
						sessionStorage.clear()
						this.$router.push('/')
						location.reload()
					}, 1300)
				}
			})
		},
		e_closeDialog() {
			this.msgback = ''
		},
	},
}
</script>

<style scoped>
.items {
	color: var(--clr0);
}
.tr0 {
	width: 220px;
	color: var(--txt);
}
.nfont {
	font-style: normal;
}
.icon_red {
	border-radius: 8px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	background-color: #ae4e54;
	color: black;
	font-weight: 700;
}
.icon_green {
	border-radius: 8px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	background-color: green;
	text-align: center;
	color: black;
	font-weight: 700;
}
.right {
	margin-left: auto;
}
</style>